<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统时间显示</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #f5f5f5;
            text-align: center;
            margin-top: 120px;
        }

        #myclock {
            font-size: 24px;
            color: #333;
            margin-bottom: 42px;
            line-height: 1.8em;
        }

        button {
            font-size: 16px;
            padding: 8px 24px;
            border: 1px solid #333;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            transition: all .3s ease;
        }
        button:hover {
            background: #333;
            color: #fff;
        }
    </style>
</head>
<body>

<!-- 显示时间的块级元素 -->
<div id="myclock">加载中…</div>

<!-- 返回上一页按钮块 -->
<div>
    <button onclick="history.back();">返回上一页</button>
</div>

<script>

    function pad(n) {
        return n < 10 ? '0' + n : n;
    }

    // 12 小时制时钟函数
    function clock12h() {
        const now = new Date();

        const year   = now.getFullYear();
        const month  = now.getMonth() + 1;      // 0-11 -> 1-12
        const date   = now.getDate();

        let hour     = now.getHours();          // 24h
        const minute = now.getMinutes();
        const second = now.getSeconds();

        const ampm   = hour >= 12 ? 'PM' : 'AM';
        hour = hour % 12;
        hour = hour ? hour : 12;                // 0 点变 12

        const weekdays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        const weekday  = weekdays[now.getDay()];

        const html = `你好，现在是北京时间：<br>${year}年${month}月${date}日 ${hour}:${pad(minute)}:${pad(second)} ${ampm} ${weekday}`;
        document.getElementById('myclock').innerHTML = html;
    }

    // 初次执行
    clock12h();
    // 每 1 秒自动刷新时间
    setInterval(clock12h, 1000);
</script>
</body>
</html>
